/*
 * IMPORTANT! Please DO NOT change this file before confirmed with designers!
 */
/*
 *  This global css file includes components:
 *  1. text
 *  2. input
 *  MORE TO COME
 */

/* Important general classnames */
.hidden {
    display: none !important;
}
.o-hidden {
    opacity: 0 !important;
}
.v-hidden {
    visibility: hidden !important;
}
.vo-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
}
.disabled {
    opacity: 0.5;
    cursor: default !important;
}
.visible {
    opacity: 1 !important;
}
.selectable-txt,
.selectable-txt *,
input,
textarea,
.mega-dialog p {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Light mode */
/* TEXT: */
/* Common value */
.txt-bold {
     font-weight: 700;
     font-family: 'LatoWebBold', 'source_sans_proregular', Arial;
}
.txt-light {
    font-weight: 300;
    font-family: 'LatoWebLight', 'source_sans_proregular', Arial;
}
.txt-green {
    color: var(--text-color-success);
}
.txt-dark {
    color: var(--text-color-high);
}
.underline-txt {
    text-decoration: underline;
    outline-color: none;
}

/* Colored text */
.red, a.red, a.red:link, a.red:visited, a.red:hover, a.red:active {
    color: var(--text-color-error);
}
.required-red {
    color: var(--text-color-error) !important;
}
a.green, a.green:link, a.green:visited, a.green:hover, a.green:active {
    color: var(--text-color-success);
}

/* Body text */
.page-title-txt, h1 {
    font: var(--text-h1);
    color: var(--text-color-high);
}
.hero-txt, h2 {
    font: var(--text-h2);
    color: var(--text-color-high);
}
.hero-txt.txt-light {
    font-family: 'LatoWebLight', 'source_sans_proregular', Arial;
}
.headline-txt, h3 {
    font: var(--text-h3);
    color: var(--text-color-medium);
}
h4 {
    font-size: 20px;
    color: var(--text-color-medium);
    line-height: 24px;
    display: inline-block;
}
h5 {
    font-size: 16px;
    color: var(--text-color-medium);
    line-height: 24px;
    display: inline-block;
}
.content-txt {
    font: var(--text-body2);
    color: var(--text-color-medium);
    padding:0;
    position: relative;
    display: inline-block;
}
.title-txt {
    font: var(--text-h2);
    color: var(--text-color-high);
    display: inline-block;
}
.subtitle-txt {
    font: var(--text-h3);
    color: var(--text-color-high);
    display: inline-block;
}
.fmholder .content-txt {
    font: var(--text-body2);
    color: var(--text-color-low);
}
.default-txt, h6 {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    padding:0;
    position: relative;
    display: inline-block;
}
.default-txt-small {
    font-size: 13px;
    line-height: 20px;
    color:#333;
    position: relative;
    display: inline-block;
}
.caption-txt {
    font-size: 13px;
    line-height: 20px;
    color: #999;
    position: relative;
    display: inline-block;
}
/* transfers related text */
/* End of text style */

/* Form Blocks for layout */
.half-sized-block {
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding: 0 0 0 12px;
    position: relative;
}
.half-sized-block:first-child, .half-sized-block.l {
    padding: 0 12px 0 0;
}

/* Input loading */
.register-loading-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
    display: none;
    background: rgba(0, 0, 0, 0) url("../images/mega/ajax-loader-gray.gif") no-repeat scroll 0 0 / 16px 16px;
    height: 16px;
    width: 16px;
}
.loading .register-loading-icon {
    display: block;
}
.register-loading-icon img {
    width: 16px;
}

/* Skeleton loading */
.sk-loading {
    cursor: default !important;
}
.sk-loading .sk-elm * {
    display: none;
}
.sk-loading i.sk-elm,
.sk-loading .sk-elm > * {
    position: relative;
    overflow: hidden;
    inset: 0;
    background-image: linear-gradient(90deg, var(--mobile-surface-2) 50px, var(--mobile-surface-1) 150px, var(--mobile-surface-2) 250px);
    background-size: 1000px 100%;
    animation: loading-shimmer 2s infinite linear;
    border-radius: 8px;
}
.sk-loading .sk-elm::after {
    border-radius: 8px;
    display: block;
    content: "";
}
.nav-elem.sk-loading .sk-elm::after {
    height: 0;
}
.nav-elem.sk-loading .sk-elm > * {
    height: 32px;
    display: block;
    width: 200px;
}
.nav-elem.sk-loading .sk-elm .primary-text {
    height: 14px;
    width: 120px;
}
.nav-elem.sk-loading .sk-elm .sub-text {
    height: 14px;
}
.nav-elem.sk-loading i.sk-elm,
.nav-elem.sk-loading i.sk-elm::after,
.sk-loading .nav-elem i.sk-elm::after {
    width: 32px;
    height: 32px;
}
.sk-loading.nav-elem .multi-text-box > *:not(:last-child) {
    margin-bottom: 4px;
}
.sk-loading.nav-elem.full-width {
    height: 64px;
}
.sk-loading.nav-elem {
    padding: 16px 24px;
}
.sk-loading .sk-elm > * {
    color: transparent !important;
    font-size: 0 !important;
}
.sk-loading.nav-elem:hover {
    background: none;
}

@keyframes loading-shimmer {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 1000px;
    }
}
